<template>
	<view class="page">
		<view class="block_1">
			<view class="box_1">
				<view class="nav-bar_1">
					<nav-bar :title="das" :color="navBarColor" :bg="navBarBg" />
				</view>
				<view class="" style="width: 100%;height: 300rpx;position: absolute;top: 100rpx;left: 0;">
					<image
						style="width: 130rpx;height: 130rpx;border-radius: 50%;position: absolute;left: 0;top: 100rpx;"
						src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/085daf5db91a498e8c78611923004528_mergeImage.png">
					</image>
					<view class="group_1">

						<text lines="1" class="text_2">张益达</text>
						<view class="tag_1">
							<text lines="1" class="text_3">46</text>
						</view>
					</view>
					<text lines="1" class="text_4">衡阳奥星·游泳教练</text>
					<view class="group_2">
						<view class="tag_2">
							<text lines="1" class="text_5">性别：男</text>
						</view>
						<view class="tag_3">
							<text lines="1" class="text_6">工作年限：10年</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="block_2">
			<!-- <view class="box_3">
				<view class="image-wrapper_1">
					<image
						src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/b185f6b92f4849ae94585321ce4a2ae6_mergeImage.png"
						class="thumbnail_1"></image>
				</view>
				<view class="group_3">
					<view class="box_4"></view>
					<text lines="1" class="text_7">分销中心</text>
				</view>
				<view class="group_4">
					<text lines="1" class="text_8" @click="myteam">201</text>
					<view class="tag_4" @click="myteam">
						<text lines="1" class="text_9">推广中</text>
					</view>
					<text lines="1" class="text_10">201</text>
					<text lines="1" class="text_11">201</text>
				</view>
				<view class="text-wrapper_1">
					<text lines="1" class="text_12" @click="myteam">我的团队</text>
					<text lines="1" class="text_13">我的直推</text>
					<text lines="1" class="text_14">我的间推</text>
				</view>
			</view> -->
			<view class="box_5" @click="zhuanshu">
				<text lines="1" class="text_15">选择小程序</text>
				<view class="image-text_1">
					<text lines="1" class="text-group_1">请选择</text>
					<image
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/7e7e2bab97f852029d3f5967cd530cbcb3e91e4e.png"
						class="icon_2"></image>
				</view>
			</view>
			<text lines="1" class="text_16">您的专属分销码，您可以分享给您的会员</text>
			<view class="" style="display: flex; justify-content: center;align-items: center;margin-top: 30rpx;">
				<u-album :urls="urls1" keyName="src2"></u-album>
			</view>
		</view>
		<view class="popup_s" v-if="popup_s" @click="popup_list"></view>
		<view class="popup_info" v-if="popup_s">
			<view style="width: 100%;height: 80rpx;position: relative;top: 0;left: 0;">
				<view style="position: absolute;top: 10rpx;left: 0;color: #fa4c4c;">
					选择小程序
				</view>
				<view style="position: absolute;top: 0;right: 0;font-size: 42rpx;color: #fa4c4c;" @click="popup_clo">
					×
				</view>
			</view>
			<scroll-view scroll-y class="popup_info_ten">
				<view v-for="(item,index) in user" :key="index" class="popup_name" @click="popup_name(item)">
					{{item.name.name}}
				</view>
			</scroll-view class="table" scroll-y style="height: 1100rpx;;">

		</view>
	</view>
</template>

<script>
	import navbar from '@/mixins/navbar.js';
	const index = require('@/api/index/index.js')

	export default {
		mixins: [navbar({
			navBarColor: '#ffffff'
		})],
		data() {
			return {
				urls: '',
				urls1: [{
					src2: '',
				}],
				popup_s: false,
				user: [],
				navBarHeight: 0,
				das: ''
			}
		},
		created() {
			const {
				navBarHeight
			} = getApp().globalData;
			this.navBarHeight = navBarHeight;

		},
		onLoad() {
			this.getApplet()
			this.das = '我的分销'
		},
		methods: {
			myteam() {
				uni.navigateTo({
					url: './my_team'
				})
			},
			zhuanshu() {
				this.popup_s = true
			},
			async getApplet() {
				let postData = {
					phone: uni.getStorageSync("user_name"),
				}
				let res = await index.getApplet(postData)
				if (res.code === 1) {
					this.user = res.data

				}
			},
			popup_name(item) {
				this.popup_s = false
				this.Distribution(item.name.appid)

			},

			async Distribution(appid) {
				let that = this;
				let data = {
					open_id: uni.getStorageSync("user_name"),
					app_id: appid,
				};
				let result = await index.Distribution(data);
				if (result.code == 1) {
					// this.urls = result.data.path
					this.urls1[0].src2 = result.data.path
				}
			},
		}
	}
</script>

<style lang="scss">
	.page {
		position: relative;
		width: 750rpx;
		height: 1624rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.block_1 {
		display: flex;
		flex-direction: column;
		width: 750rpx;
	}

	.box_1 {
		width: 750rpx;
		height: 636rpx;
		background: url('https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/fcec56d7ce544fccb153aefb44f5d488_mergeImage.png') 100% no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
	}

	.image_1 {
		width: 654rpx;
		height: 22rpx;
		margin: 32rpx 0 0 66rpx;
	}

	.nav-bar_1 {
		width: 750rpx;
		height: 94rpx;
		margin-top: 24rpx;
		flex-direction: row;
		display: flex;
	}

	.box_2 {
		height: 37rpx;
		display: flex;
		flex-direction: column;
		width: 184rpx;
		margin: 36rpx 0 0 30rpx;
	}

	.section_1 {
		width: 184rpx;
		height: 37rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
	}

	.icon_1 {
		width: 20rpx;
		height: 37rpx;
	}

	.text_1 {
		width: 145rpx;
		height: 34rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 36rpx;
		font-family: PingFang-SC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 36rpx;
		margin-top: 1rpx;
	}

	.applet-top-bar_1 {
		width: 150rpx;
		height: 55rpx;
		margin: 21rpx 21rpx 0 365rpx;
	}

	.group_1 {
		width: 220rpx;
		height: 35rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 85rpx 0 0 217rpx;
	}

	.text_2 {
		width: 108rpx;
		height: 35rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 36rpx;
		font-family: PingFang-SC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
	}

	.tag_1 {
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 16rpx;
		height: 32rpx;
		margin-top: 1rpx;
		display: flex;
		flex-direction: column;
		width: 81rpx;
	}

	.text_3 {
		width: 29rpx;
		height: 19rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 34rpx;
	}

	.text_4 {
		width: 255rpx;
		height: 26rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 26rpx;
		font-family: PingFang-SC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin: 18rpx 0 0 215rpx;
	}

	.group_2 {
		width: 442rpx;
		height: 50rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 29rpx 0 249rpx 214rpx;
	}

	.tag_2 {
		background-color: rgba(255, 255, 255, 0.200000);
		border-radius: 25rpx;
		height: 50rpx;
		display: flex;
		flex-direction: column;
		width: 177rpx;
	}

	.text_5 {
		width: 104rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 26rpx;
		font-family: PingFang-SC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 26rpx;
		margin: 13rpx 0 0 32rpx;
	}

	.tag_3 {
		background-color: rgba(255, 255, 255, 0.200000);
		border-radius: 25rpx;
		height: 50rpx;
		display: flex;
		flex-direction: column;
		width: 240rpx;
	}

	.text_6 {
		width: 190rpx;
		height: 26rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 26rpx;
		font-family: PingFang-SC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 26rpx;
		margin: 13rpx 0 0 26rpx;
	}

	.block_2 {
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 40rpx;
		position: absolute;
		left: 0rpx;
		top: 400rpx;
		width: 750rpx;
		height: 1067rpx;
		display: flex;
		flex-direction: column;
	}

	.single-avatar_1 {
		width: 130rpx;
		height: 130rpx;
		margin: -354rpx 0 0 55rpx;
	}

	.box_3 {
		box-shadow: 0px 13px 57px 0px rgba(8, 73, 162, 0.110000);
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 20rpx;
		height: 198rpx;
		width: 690rpx;
		display: flex;
		flex-direction: column;
		margin: -155rpx 0 0 30rpx;
	}

	.image-wrapper_1 {
		width: 12rpx;
		height: 12rpx;
		display: flex;
		flex-direction: row;
		margin: 18rpx 0 0 24rpx;
	}

	.thumbnail_1 {
		width: 12rpx;
		height: 12rpx;
	}

	.group_3 {
		position: relative;
		width: 134rpx;
		height: 31rpx;
		display: flex;
		flex-direction: row;
		margin: -1rpx 0 0 31rpx;
	}

	.box_4 {
		background-color: rgba(255, 65, 5, 1.000000);
		width: 13rpx;
		height: 30rpx;
		display: flex;
		flex-direction: column;
		margin: 1rpx 0 0 121rpx;
	}

	.text_7 {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 130rpx;
		height: 31rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 32rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 39rpx;
	}

	.group_4 {
		width: 470rpx;
		height: 45rpx;
		flex-direction: row;
		display: flex;
		margin: 21rpx 0 0 110rpx;
	}

	.text_8 {
		width: 54rpx;
		height: 27rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 36rpx;
		font-family: DIN-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin-top: 18rpx;
	}

	.tag_4 {
		background-color: rgba(255, 65, 5, 1.000000);
		border-radius: 10rpx;
		height: 23rpx;
		margin-left: 1rpx;
		display: flex;
		flex-direction: column;
		width: 68rpx;
	}

	.text_9 {
		width: 53rpx;
		height: 17rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 18rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 13rpx;
		margin: 3rpx 0 0 7rpx;
	}

	.text_10 {
		width: 54rpx;
		height: 27rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 36rpx;
		font-family: DIN-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin: 18rpx 0 0 83rpx;
	}

	.text_11 {
		width: 54rpx;
		height: 27rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 36rpx;
		font-family: DIN-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin: 18rpx 0 0 156rpx;
	}

	.text-wrapper_1 {
		width: 511rpx;
		height: 23rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 19rpx 0 30rpx 90rpx;
	}

	.text_12 {
		width: 94rpx;
		height: 23rpx;
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
	}

	.text_13 {
		width: 94rpx;
		height: 23rpx;
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin-left: 114rpx;
	}

	.text_14 {
		width: 94rpx;
		height: 23rpx;
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin-left: 115rpx;
	}

	.box_5 {
		box-shadow: 0px 13px 57px 0px rgba(8, 73, 162, 0.110000);
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 20rpx;
		width: 690rpx;
		height: 106rpx;
		flex-direction: row;
		display: flex;
		margin: 20rpx 0 0 30rpx;
	}

	.text_15 {
		width: 137rpx;
		height: 26rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
		margin: 40rpx 0 0 32rpx;
	}

	.image-text_1 {
		width: 114rpx;
		height: 26rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 40rpx 30rpx 0 377rpx;
	}

	.text-group_1 {
		width: 83rpx;
		height: 26rpx;
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 28rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
	}

	.icon_2 {
		width: 13rpx;
		height: 22rpx;
		margin-top: 2rpx;
	}

	.text_16 {
		width: 478rpx;
		height: 27rpx;
		overflow-wrap: break-word;
		color: rgba(190, 190, 190, 1);
		font-size: 26rpx;
		font-family: PingFang-SC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 26rpx;
		margin: 35rpx 0 0 135rpx;
	}

	.image_2 {
		width: 527rpx;
		height: 527rpx;
		margin: 9rpx 0 0 112rpx;
	}

	.text_17 {
		width: 113rpx;
		height: 27rpx;
		overflow-wrap: break-word;
		color: rgba(255, 65, 5, 1);
		font-size: 28rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
		margin: 30rpx 0 228rpx 319rpx;
	}

	.popup_info {
		position: fixed;
		width: 530rpx;
		height: 743rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 30rpx;
		padding: 40rpx;
		overflow: hidden;
		background-image: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/e89844bfef73c699ef06622d923147613e4585af.png');
		background-repeat: no-repeat;
		z-index: 9999;
		background-size: 100% 100%;

		.popup_info_ten {
			width: 100%;
			height: 400rpx;
			margin-top: 120rpx;

			.popup_name {
				width: 100%;
				height: 80rpx;
				background-color: #f8f8f8;
				margin-top: 10rpx;
				line-height: 80rpx;
				text-align: center;

			}
		}

	}

	.popup_s {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		width: 100vw;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 9998;
	}
</style>